<template>
  <div class="big-box">
    <div class="table-container" @click="select()">
      <div class="title">
        <span v-if="thisComponen.attribute.ifCheck" class="title-span">*</span>
        <div v-for="(item,index) of thisComponen.attribute.titName" :key="index">{{item}}</div>
      </div>
      <div class="select-box">
        <p v-if="thisComponen.attribute.filedValue" style="color: #3a3a3a;">{{ thisComponen.attribute.filedValue }}</p>
        <p v-else style="color: #A5A3A5">{{ thisComponen.attribute.placeholder }}</p>
        <!-- <input @blur="out" readonly="readonly" v-model.trim="thisComponen.attribute.filedValue" :placeholder="thisComponen.attribute.placeholder" type="text"></input> -->
      </div>
      <div class="con-right-img">
        <img src="https://gw.alicdn.com/tfs/TB1ugyJFr9YBuNjy0FgXXcxcXXa-11-20.png">
      </div>
    </div>
    <!-- 插件 -->
    <div v-if="showpicker" @click="showpicker=false" class="back" @touchmove.prevent></div>
    <div v-if="showpicker" class="pk" @touchmove.prevent>
      <div class="btn">
        <div @click="showpicker=false" class="btnC">取消</div>
        <div @click="sureFile()" class="btnD">确定</div>
      </div>
      <div style="float:left;width:100%">
        <mt-picker :slots="selectList" @change="onValuesChange"></mt-picker>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["thisComponen"],
  data() {
    return {
      thisSelect: "",
      showpicker: false,
      selectList: [
        {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "center",
          defaultIndex: 0
        }
      ]
    };
  },
  methods: {
    out() {
      setTimeout(function() {
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    //确定选这的字段
    sureFile() {
      this.thisComponen.attribute.filedValue = this.thisSelect;
      this.showpicker = false;
      this.$forceUpdate();
    },
    // 启动创建
    select() {
      let data = [];
      for (let j = 0; j < this.thisComponen.attribute.selectList.length; j++) {
        data.push(this.thisComponen.attribute.selectList[j].name);
        if (
          this.thisComponen.attribute.filedValue ==
          this.thisComponen.attribute.selectList[j].name
        ) {
          this.selectList[0].defaultIndex = j;
        }
      }
      this.selectList[0].values = data;
      this.showpicker = true;
    },
    // 选择的
    onValuesChange(picker, values) {
      this.thisSelect = values[0];
    }
  }
};
</script>

<style scoped>
@import "./../../../static/css/select.css";
.back {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 50;
  background-color: black;
  opacity: 0.5;
}
.table-container {
  display: flex;
  align-items: center;
}
.select-box {
  font-size: 1.3rem;
  padding-left: 1rem;
  color: #3a3a3a;
}
.pk {
  position: fixed;
  left: 0rem;
  width: 100%;
  height: auto;
  bottom: 0;
  z-index: 300;
}
.btn {
  height: 3rem;
  width: 100%;
  color: #000000;
  background-color: #ffffff;
  position: absolute;
  z-index: 999;
  top: -3rem;
  display: flex;
  font-size: 1.2rem;
  line-height: 3rem;
  border-bottom: 0.1rem solid #f1f1f1;
}
.btnC {
  flex: 1;
  text-align: left;
  padding-left: 0.5rem;
}
.btnD {
  flex: 1;
  text-align: right;
  padding-right: 0.5rem;
}
.picker-slot {
  font-size: 0.55rem !important;
}
.picker {
  background-color: #ffffff;
}
.clearfloat {
  padding: 0 0.5rem;
  float: left;
}
</style>
